<template>
  <div>
    <page-bg class="page-bg" title="学习笔记"></page-bg>
    <n-grid item-responsive>
      <n-gi span="1 800:1 1200:4" />
      <n-gi span="22 800:22 1200:16">
        <card v-for="(item,index) in list" :data="item" :key="item.id" :floatLeft="index%2==0"></card>
      </n-gi>
      <n-gi span="1 800:0" />
    </n-grid>

    <pagination
      v-show="total>0" 
      :total="total" 
      v-model:page="pageNum" 
      v-model:limit="pageSize" 
      @pagination="getList"
    ></pagination>
  </div>
</template>

<script setup name="StudyNotes">
import PageBg from "@/components/PageBg/index.vue"
import Card from "@/components/Card/index.vue"
import Pagination from "@/components/Pagination/index.vue"
import { getStudyNotes } from "@/api/home.js"
import { ref, onMounted } from "vue"

const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getList = () => {
  getStudyNotes({
    pageNum:pageNum.value,
    pageSize:pageSize.value
  }).then(res => {
    list.value = res.list;
    total.value = res.total;
  })
}
onMounted(()=>{
  getList();
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.page-bg {
  width: 100%;
  height: 400px;
}
</style>